<template>
  <div class="content-more" :style="customHeader">
    <div class="content-more-body">
      <div class="content-header" :style="titleStyle">
        <div class="header-content">
          <div class="content-header-title">
            <div class="header-breadcrumb active" :style="titleFont" @click="callBackMenu">{{ menuName }}</div>
            <div class="header-icon" :style="activeFont"><i class="el-icon-arrow-right" /></div>
            <div v-if="showMenu === true" :style="titleFont" class="header-breadcrumb active" @click="callBackColumn">{{ columnName }}</div>
            <div v-if="showMenu === true" :style="activeFont" class="header-icon"><i class="el-icon-arrow-right" /></div>
            <div class="header-breadcrumb" :style="activeFont">详情查看</div>
          </div>
          <div class="header-back" :style="titleFont" @click="callBackMenu">
            返回&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-right" style="font-size: 16px" />
          </div>
        </div>
      </div>
      <div class="content-component">
        <component :is="templateName" v-if="templateName" :layout="layoutStyle" :show-header="true" :temp="temp" :params="params" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PortalNew4Entity',
  props: {
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      setting: {},
      params: [],
      temp: null,
      column: null,
      columnName: '',
      menuName: '',
      menuId: null,
      templateName: null,
      showMenu: true,
      layoutStyle: {},
      customHeader: {},
      titleStyle: {},
      titleFont: {},
      activeFont: {}
    };
  },
  watch: {
    layout: {
      handler(newName, old) {
        this.layoutStyle = newName;
        this.customHeader = { color: newName.fontColor, backgroundColor: newName.mrzt, opacity: newName.tmd };
        this.titleStyle = { backgroundColor: newName.mrlb, opacity: newName.tmd };
        this.titleFont = { color: newName.lmys };
        this.activeFont = { color: newName.xsys };
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    setting: {
      handler(newName, oldName) {
        if (undefined !== newName.showMenu) {
          this.showMenu = newName.showMenu;
        }
        if (undefined === newName.column || newName.column === null) {
          this.column = newName.setting;
        } else {
          this.column = newName.column;
          this.column.showHeader = true;
          if (undefined !== newName.setting.column) {
            this.column.columnName = newName.setting.lmmc;
            this.column.menuName = newName.setting.column.menu.name;
            this.column.menuId = newName.setting.column.menu.id;
          }
        }
        this.params = newName.params;
        this.temp = newName.temp;
        if (undefined === newName.setting.columnName || newName.setting.columnName === null) {
          this.columnName = newName.setting.lmmc;
          this.menuName = newName.setting.column.menu.name;
          this.menuId = newName.setting.column.menu.id;
        } else {
          this.columnName = newName.setting.columnName;
          this.menuName = newName.setting.menuName;
          this.menuId = newName.setting.menuId;
        }
        const path = '/' + this.temp.ssdl + '/' + this.temp.mbmc;
        const res = () => import(`@/template/entityTemp${path}`);
        this.templateName = res;
      },
      immediate: false, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    init(data, lay) {
      this.setting = data;
      this.layoutStyle = lay;
    },
    callBackMenu() {
      this.$emit('callBackMenu', this.menuId);
    },
    callBackColumn() {
      this.$emit('callBackColumn', this.column);
    }
  }
};
</script>

<style scoped>
.content-more {
  width: 100%;
  height: 100%;
  padding: 10px 8%;
  box-sizing: border-box;
  position: relative;
  overflow-y: auto;
}
.content-more-body{
  width: 100%;
  height: initial;
  display: flex;
  flex-flow: column nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
  border-radius: 4px;
  background-color: #ffffff;
}
.content-header {
  flex: 0 1 auto;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
  padding: 0px 15px;
}
.header-content {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #F2F6FC;
}
.content-component{
  flex: 1 1 auto;
  width: 100%;
  height: initial;
}
.content-header-title {
  flex: 1 1 auto;
  height: 40px;
  line-height: 40px;
  display: flex;
  flex-flow: row nowrap;
}
.header-breadcrumb {
  flex: 0 1 auto;
  padding: 0px 5px;
  box-sizing: border-box;
  text-align: center;
  color: #909399;
  cursor: pointer;
}
.header-icon {
  width: 20px;
  text-align: center;
  color: #909399;
}
.active {
  font-weight: bolder;
  color: #222222;
}
.header-back {
  flex: 0 1 auto;
  width: 60px;
  line-height: 40px;
  position: relative;
  cursor: pointer;
}
.header-back:hover,.active:hover {
  color: #4a98f6;
}
.header-back::before {
  content: " ";
  width: 2px;
  height: 16px;
  top: 12px;
  left: 35px;
  position: absolute;
  background-color: #C0C4CC;
}
</style>
